<template>
	<view class="login flex-col">
		<!-- 内容 -->
		<view class="login-form flex-col align-center overflow-y">
			<tui-form ref="registerRef"></tui-form>

			<!-- logo -->
			<img class="logo" data="" src="./assets/logo.png" alt="" />

			<!-- 手机号 -->
			<tui-input
				clearable
				:borderBottom="false"
				v-model="formData.mobile"
				:labelSize="28"
				:size="28"
				backgroundColor="#F9F9F9"
				label="+86"
				style="width: 100%"
				placeholder="请输入手机号"
			>
			</tui-input>

			<!-- 密码 -->
			<tui-input
				class="input-item"
				type="password"
				clearable
				:borderBottom="false"
				v-model="formData.password"
				:marginTop="24"
				:labelSize="28"
				:size="28"
				backgroundColor="#F9F9F9"
				label="密码"
				style="width: 100%"
				placeholder="请输入密码"
			></tui-input>

			<!-- 确认密码 -->
			<tui-input
				class="input-item"
				type="password"
				clearable
				:borderBottom="false"
				v-model="formData.repassword"
				:marginTop="24"
				:labelSize="28"
				:size="28"
				backgroundColor="#F9F9F9"
				label="确认密码"
				style="width: 100%"
				placeholder="请输入密码"
			></tui-input>

			<!-- 支付密码 -->
			<tui-input
				clearable
				type="password"
				:borderBottom="false"
				v-model="formData.payment_code"
				:marginTop="24"
				:labelSize="28"
				:size="28"
				backgroundColor="#F9F9F9"
				label="支付密码"
				style="width: 100%"
				placeholder="请输入支付密码"
			></tui-input>

			<!-- 邀请码 -->
			<tui-input
				clearable
				:borderBottom="false"
				v-model="formData.institution_number"
				:marginTop="24"
				:labelSize="28"
				:size="28"
				backgroundColor="#F9F9F9"
				label="邀请码"
				style="width: 100%"
				placeholder="请输入邀请码"
			></tui-input>

			<!--  协议 -->
			<view class="agreement flex-row align-center">
				<checkbox-group @change="agree = !agree">
					<checkbox
						value=""
						class="agreement-checkbox"
						:checked="agree"
						color="#F74E51"
					/>
				</checkbox-group>

				<view class="flex-row tip">
					<text class="padding-right-half">我已阅读并同意</text>
					<navigator class="text-orange" url="/pages/cms/xieyi"
						>《用户协议》</navigator
					>
					后可登录
				</view>
			</view>

			<tui-button
				class="login-btn"
				:loading="submiting"
				:disabled="submiting"
				type="theme"
				@click="submit"
				margin="60rpx 0 0 0"
				>注册</tui-button
			>
			<tui-button
				class="register-btn"
				type="warning"
				plain
				link
				@click="login"
				:loading="submiting"
				:disabled="submiting"
				margin="20rpx 0 0 0"
			>
				<text>去登录 </text>
				<img class="register-arrow" src="./assets/arrow-right.png" alt="" />
			</tui-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import tui from '@/common/httpRequest';

	// 接口
	import { registerUser } from '@/api/user.js';
	import { useUserStore, useMainStore } from '@/store';

	defineOptions({
		name: 'Register',
	});

	// store
	const userStore = useUserStore();
	const mainStore = useMainStore();

	// 初始化数据
	const agree = ref(true); // 协议勾选, 默认选中
	const submiting = ref(false); // loading
	const formData = reactive({
		mobile: '', // 手机号
		password: '', // 密码
		repassword: '', // 确认密码
		payment_code: '', // 支付密码
		institution_number: '', // 邀请码
	});

	// 校验
	let rules = [
		{
			name: 'mobile',
			rule: ['required', 'isMobile'],
			msg: ['请输入手机号', '请输入正确的手机号'],
		},
		{ name: 'password', rule: ['required'], msg: ['请输入密码'] },
		{
			name: 'repassword',
			rule: ['required', 'isSame:password'],
			msg: ['请输入确认密码', '两次密码不一致'],
		},
		{
			name: 'payment_code',
			rule: ['required', 'minLength:6', 'maxLength:6'],
			msg: ['请输入支付密码', '支付密码长度6位数字', '支付密码长度6位数字'],
		},
	];

	// 注册
	const registerRef = ref(); // form 组件示例
	const submit = async () => {
		// 同意用户协议
		if (!agree.value) {
			tui.toast('请阅读并同意用户协议');
			return;
		}

		// 账号密码数据
		let postData = {
			...formData,
		};

		console.log('postData', postData);

		// 校验账号密码
		let checkRes;

		try {
			checkRes = await registerRef.value.validate(postData, rules);
		} catch (e) {
			//TODO handle the exception
			console.log(e);
			checkRes = e;
		}

		// 账号校验通过
		if (checkRes.isPass) {
			// 开启loading
			submiting.value = true;

			try {
				const res = await registerUser(postData);
				console.log('res', res);

				if (res.code == 1) {
					await tui.modal(null, '注册成功', false);
					console.log(1111);

					// 用户信息存入pinia
					userStore.setUser(res.data.userinfo);

					// 登录信息存入本地缓存
					uni.setStorageSync('token', res.data.userinfo.token);

					await mainStore.getConfig();
					uni.switchTab({
						url: '/pages/tabbar/index',
					});
				} else {
					tui.toast(res.msg);
				}
			} catch (err) {
				console.error('err', err);
				tui.toast(res.msg);
			} finally {
				submiting.value = false;
			}
		} else {
			tui.toast(checkRes.errorMsg);
		}
	};

	// 去登录
	const login = () => {
		uni.navigateTo({
			url: '/pages/login/index',
		});
	};
</script>

<style lang="scss" src="./css/index.scss" scoped></style>
